<template>
    <div class="cxkqun">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <SideBarVue></SideBarVue>
        </div>
        <!-- 内容展示区 -->
        <div class="container" :style="{ flexDirection: flexDirection }">
            <!-- 左边表格过渡 -->
            <div class="table"><router-view name="left"></router-view></div>
            <!-- 右边面板过渡 -->
            <div class="panel" :style="{ width: right.width, height: right.height }"><router-view name="right"></router-view>
            </div>
        </div>
    </div>
</template>

<script setup>
import SideBarVue from './SideBar.vue'
import { watch, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();
const route = useRoute();
const flexDirection = ref('column');
const right = ref({
    width: '100%',
    height: '300px'
})

onMounted(() => {
    store.dispatch('getPast7DaysData');
    store.dispatch('getPast24HoursData');
    store.dispatch('getPast24HoursTopPage');
    store.dispatch('getPast24HoursTopLine');
    setInterval(() => {
        store.dispatch('getPast7DaysData');
        store.dispatch('getPast24HoursData');
        store.dispatch('getPast24HoursTopPage');
        store.dispatch('getPast24HoursTopLine');
    }, 4000)

    // 不需要定时执行
    store.dispatch('getAllShorts')
    store.dispatch('getUserTable')
    store.dispatch('getGroupShort')
})

watch(() => route.path, (newPath, oldPath) => {
    if (newPath === '/back/home') {
        flexDirection.value = 'column';
        right.value.width = '100%';
        right.value.height = '300px'
    } else if (newPath === '/back/table') {
        flexDirection.value = 'row';
        right.value.width = '300px';
        right.value.height = '100%';
    }else if(newPath === '/back/links'){
        flexDirection.value = 'column';
        right.value.width = '0';
        right.value.height = '0'
    }else{
        flexDirection.value = 'row';
        right.value.width = '50%';
        right.value.height = '100%';
    }
});
</script>

<style scoped lang="less">
.cxkqun {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow: hidden;

    &>.sidebar {
        width: 200px;
        height: 100%;
    }

    &>.container {
        height: 100%;
        flex-grow: 1;
        display: flex;
        padding: 1rem 0;

        &>.table {
            overflow-y: auto;
            flex-grow: 1;
        }

        &>.panel {
            height: 100%;
        }
    }
}
</style>